<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('inbox-list')"  name="Inbox" label="收件箱">
        <inbox-list  v-show="activeTab === 'Inbox'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('send-list')"  name="postbox" label="发件箱">
        <post-box  v-show="activeTab === 'postbox'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('mail-list')"  name="three" label="会员站内信汇总">
         <letter-summary  v-show="activeTab === 'three'"/>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('list')" name="one" label="公告管理">
        <announcement-list />
      </el-tab-pane>
       <el-tab-pane v-if="roleCheck('tickling-list')"  name="five" label="反馈类别设置">
         <feedback-type-edit  v-show="activeTab === 'five'"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AnnouncementList from './announcementList';// 公告管理
import InboxList from './inbox/inboxList.vue';// 收信箱
import PostBox from './postBox/postBox.vue';// 收信箱
import FeedbackTypeEdit from './feedbackType/feedbackTypeList';// 收信箱
import LetterSummary from './letterSummary/summary';

import { tabs } from '@/build';

export default {
  name: 'announcement',

  components: {
    AnnouncementList,
    InboxList,
    PostBox,
    FeedbackTypeEdit,
    LetterSummary,
  },

  mixins: [tabs],

  data() {
    return {
      activeTab: 'Inbox',
    };
  },
  mounted() {
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '公告管理', true) });
  },
  methods: {
    changeTab(tabs) {
      this.activeTab = tabs.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, tabs.label, true) });
    },
  },
};
</script>

<style scoped>

</style>
